<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网站统计</title>
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>


    <div class="counter-box">
        <span>您是本站的第</span>
        <span class="counter">
            <i class="iconfont icon-shuzi1"></i>
            <i class="iconfont icon-shuzi0"></i>
            <i class="iconfont icon-shuzi0"></i>
            <i class="iconfont icon-shuzi0"></i>
            <i class="iconfont icon-shuzi0"></i>
            <i class="iconfont icon-shuzi0"></i>
        </span>
        <span>位访问者</span>
    </div>
    <div class="ip">
        <span>内网IP：</span>
        <span id="ip1">xxxx</span>
        <span>外网IP：</span>
        <span id="ip2">xxxx</span>
    </div>
    <div class="os">
        <span>操作系统：</span>
        <span id="os">xxxx</span>
    </div>
    <div class="browser">
        <span>浏览器：</span>
        <span id="browser">xxxx</span>
    </div>

    <!-- 把封装的相应插件引入 -->
    <script src="js/ip.js"></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>

    <script src="js/os.js"></script>
    <script src="js/browser.js"></script>

    <script>
        // A. 如何取得访问当前站点的人数
        function getData() {
            // 1. num取上一次访问的人数，可以把上次访问的人数存储在localStorage中。
            // console.log(localStorage.getItem('count'));
            var num = localStorage.getItem('count') ? localStorage.getItem('count') - 0 : 100000;
            // 当++或--作为独立的语句，没有赋值给其他变量时，如下的三行代码效果。最终都让num + 1;
            // num++;
            // ++num;
            // num = num + 1;
            // var a = ++num; // 先加1，再使用，100000+1赋值给a
            // var b = num++; // 先使用，再加1，num已经是100001，直接给b
            // console.log(a);
            // console.log(b);
            // console.log(num); // 100001

            // 2. 让num加1
            num = num + 1;

            // 3. 把新num存储到localStorage中
            localStorage.setItem('count', num);

            return num;
        }

        var count = getData();
        // console.log(count);

        // B. 需要把数字转换成相应的icon
        function transform(count) {
            var html = '';
            var str = count.toString();
            for (let i = 0; i < str.length; i++) {
                html += `<i class="iconfont icon-shuzi${str[i]}"></i>`;
            }
            return html;
        }


        var html = transform(count);
        var counter = document.querySelector(".counter");
        counter.innerHTML = html;

        // 先获取ip容器，os容器，browser容器
        function setData() {
            var ip1 = document.querySelector("#ip1");
            var ip2 = document.querySelector("#ip2");
            var os = document.querySelector("#os");
            var browser = document.querySelector("#browser");

            window.ip.getIP(function (ip) {
                ip1.textContent = ip || "未知";
            })
            // document.write(returnCitySN["cip"]+','+returnCitySN["cname"]);
            
            os.textContent = window.os.getOS();
            browser.textContent = window.browser.getBrowser();ip2.textContent = returnCitySN.cip;
        }


        setData();
    </script>
</body>

</html>